<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>jquery-ajax-01.html</h1>
<button onclick="doAjax()">$.ajax()</button>
<button onclick="doAjaxPost()">$.post()</button>
<button onclick="doAjaxGet()">$.get()</button>
<button onclick="doAjaxLoad()">$.("").load()</button>
<button onclick="doAxiosGet()">axios.get</button>
<div id="result"></div>

<script src="/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

    function doAjax() {
        let url = "http://localhost/doAjaxGet";
        let params = "";
        $.ajax({
            type: "GET",
            url: url,
            data: params,
            async: true, /* 默认为true 表示异步 */
            dataType: "text",
            success: function (result) {
                $("#result").html(result);
            }
        });
    }

    function doAjaxPost() {
        let url = "http://localhost/doAjaxPost";
        let params = "id=2&name=电脑&remark=游戏本";
        // $.ajax({
        //     type: "POST",
        //     url: url,
        //     data: params,
        //     async: true,
        //     contentType: "application/x-www-form-urlencoded", /* 指定类型 默认ajax会设置 可以不写 */
        //     success: function (result) {
        //         console.log(result);
        //     }
        // });
        $.post(url, params, function (result) {
            $("#result").html(JSON.stringify(result));
        });
    }

    function doAjaxGet() {
        let url = "http://localhost/doAjaxGet";
        let params = "";
        $.get(url, params, function (result) {
            $("#result").html(JSON.stringify(result));
        });
    }

    function doAjaxLoad() {
        let url = "http://localhost/doAjaxGet";
        let params = "";
        $("#result").load(url, params);
        $("#result").load(url, params, function () {
            document.write("load finish");
        });
    }

    function doAxiosGet() {
        const axios = require('axios').default;
        axios.get('http://localhost/doAjaxGet')
            .then(function (result) {
                console.log(result);
            })
            .catch(function (error) {
                console.log(error)
            });
    }

</script>

</body>
</html>
